<%--
   公司等待竞单的列表
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%pageContext.setAttribute("APP_PATH", request.getContextPath());%>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>报修审批操作</title>

    <meta name="description" content="Static &amp; Dynamic Tables" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <script src="${APP_PATH }/recourse/lib/layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="${APP_PATH }/recourse/lib/layui/css/layui.css">
    <link rel="stylesheet" href="${APP_PATH}/recourse/css/login.css">
    <script type="text/javascript" src="${APP_PATH }/assets/js/xadmin.js"></script>

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <style>
        @import url(https://fonts.googleapis.com/css?family=Open+Sans);
        body {
            padding: 20px;
            font: 1.4em/1.4em 'Open Sans', sans-serif;
        }
        .module {
            width: 450px;
            margin: 0 0 1em 0;
            overflow: hidden;
        }
        .module p {
            margin: 0;
        }

        .line-clamp {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        .fade {
            position: relative;
            height: 3.6em; /* exactly three lines */
        }
        .fade:after {
            content: "";
            text-align: right;
            position: absolute;
            bottom: 0;
            right: 0;
            width: 70%;
            height: 1.2em;
            background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
        }

        .ftellipsis {
            height: 3.6em;
        }

        h1 {
            margin: 0 0 1em 0;
        }
        h2 {
            font-size: 1.2em;
        }

    </style>
    <script>
        window.onload =function()
        {

            var state = ${order.order_state};
            var video = ${video.size()};
            if(!(state === 4)){
                document.getElementById("4").style.display="none";

            }
            if(!(state===12)){
                document.getElementById("12").style.display="none";
            }
            if(!(state===7)){
                document.getElementById("71").style.display="none";
                document.getElementById("321").style.display="none";
            }

        }

    </script>
</head>

<body >
<div class="container">
    <div class="row">
        <div class="span2">
        </div>
        <div class="span8">

                <div class="row">
                    <div class="span10">
                        <div class="tabbable" id="tabs-316567">
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a data-toggle="tab" href="#panel-693699">维修单详情</a>
                                </li>
                                <li>
                                    <a id = "4" data-toggle="tab" href="#444">报修待审批</a>
                                </li>
                                <li>
                                    <a id="12" data-toggle="tab" href="#555">竞单待审批</a>
                                </li>
                                <li>
                                    <a id="321" data-toggle="tab" href="#545">验收操作</a>
                                </li>
                                <li>
                                    <a id="71" data-toggle="tab" href="#771">验收图片/视频信息</a>
                                </li>
                                <li>
                                    <a data-toggle="tab" href="#123">故障信息查看</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="panel-693699">
                                    <table width="650" height="350"  style="margin-left: 40px;">
                                        <tr>
                                            <td><b>维修单名称：</b>${order.order_name}</td>
                                            <td><b>维修单编号：</b>${order.id}</td>
                                        </tr>

                                        <tr>
                                            <td><b>维修单所属部门：</b>${order.department_id==1?"营房":(order.department_id==2?"装备":"公共")}</td>
                                            <td><b>维修单拟定价格：</b>${order.second_price}元</td>
                                        </tr>
                                        <tr>
                                            <td><b>维修最终报价：</b>${order.final_price}元</td>
                                            <td><b>维修单发起时间：</b><fmt:formatDate value="${order.createTime}" type="date"/></td>
                                        </tr>
                                        <tr>
                                            <td><b>设备管理员维修要求：</b>${a.equals("")?(f.equals("")?"无":f):a}</td>
                                            <td><b>审核员维修要求：</b>${b.equals("")?"无":b}</td>
                                        </tr>
                                        <tr>
                                            <td><b>开始维修时间：</b><fmt:formatDate value="${order.maintenanceTime}" type="date"/></td>
                                            <td><b>结束维修时间：</b><fmt:formatDate value="${order.maintenanceFinishTime}" type="date"/></td>
                                        </tr>
                                        <tr>
                                            <td><b>维修方：</b>${order.unit_name}</td>
                                            <td><b>维修单目前状态：</b>${order.state_name}</td>
                                        </tr>
                                        <tr>
                                            <td><b>报修单位：</b>${order.insiderUnit_name}</td>
                                            <td><b>报修人员：</b>${order.equipment_admin_name}</td>
                                        </tr>
                                    </table>
                                    <p style="margin-left: 20px;">问题描述：</p><br>
                                    <div  class="module line-clamp" style="background-color: #F5F5F5 ;height: 80px;margin-left: 40px;width:690px;">
                                        ${order.problem_word}
                                    </div>
                                    <hr/>
                                </div>

                                <div class="tab-pane" id="123">
                                    <br>
                                    故障信息；
                                    <div  style="width:100%;margin:0 auto;">
                                    <c:forEach items="${photoes}" var="list" varStatus="status">
                                        <div class="img">
                                            <img src="/mmmsimage/${list}" alt="暂无图片信息" style="width:25%">
                                        </div>
                                    </c:forEach>
                                    </div>
                                    视频：
                                    <c:forEach items="${video}" var="list_v" varStatus="status">
                                        <video width="320" height="240" style="margin-left: 200px;" controls autoplay>
                                            <source src="/mmmsimage/${list_v}" type="video/mp4">
                                            <object data="/mmmsimage/${list_v}" width="320" height="240">
                                                <embed width="320" height="240" src="/mmmsimage/${list_v}">
                                            </object>
                                        </video><br>
                                    </c:forEach>
                                    <br>

                                </div>
                                <div class="tab-pane" id="545">
                                    <br>
                                    <a type="button"  target="_blank"  role="button" class="green" data-toggle="modal" href="${pageContext.request.contextPath}/admin/download?filenames=${order.expense_file}" style="margin-left: 150px;size: 20px;">点击下载清单文件</a>
                                    <div class="control-group" style="margin-left: 35px;">
                                        <div>
                                            拒绝原因：<br><br>
                                            <textarea id = "states" name="states" style="width:338px;height:100px"></textarea>
                                        </div>
                                    </div>
                                    <br>
                                    <br>
                                    <button  class="btn btn-success" type="submit" onclick="r_ight();" style="margin-left: 95px;">验收审批通过</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button  class="btn btn-danger" type="submit" onclick="n_o();">验收审批不通过</button>


                                </div>
                                <div class="tab-pane" id="771">
                                    <br>
                                    <p>图片信息</p>
                                    <div style="width:100%;margin:0 auto;">
                                        <c:forEach items="${photos}" var="p_list" varStatus="status">
                                            <div class="img">
                                                <img border="12dp" src="/mmmsimage/${p_list}" alt="暂无图片信息" style="width:25%">
                                            </div>
                                        </c:forEach>
                                    </div>
                                    <br>
                                    <p>视频信息</p>
                                    <c:forEach items="${videos}" var="list_v" varStatus="status">
                                        <video width="320" height="240" style="margin-left: 200px;" controls autoplay>
                                            <source src="/mmmsimage/${list_v}" type="video/mp4">
                                            <object data="/mmmsimage/${list_v}" width="380" height="260">
                                                <embed width="320" height="240" src="/mmmsimage/${list_v}">
                                            </object>
                                        </video><br>
                                    </c:forEach>
                                </div>

                                <div class="tab-pane" id="444">
                                    <br>
                                    <div class="control-group">
                                        <div>
                                            驳回原因：<br><br>
                                            <textarea id = "reason" name="reason" style="width:338px;height:100px"></textarea>
                                        </div>
                                    </div>
                                    <br>
                                    <br>
                                    <button  class="btn btn-success" type="submit" onclick="a();">报修审批通过</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button  class="btn btn-danger" type="submit" onclick="b();">审批不通过</button>
                                </div>
                                <div class="tab-pane" id="555">
                                    <br>
                                    <div class="control-group" style="margin-left: 35px;">
                                        <p>
                                            公司名称:&nbsp;${bid.maintenance_company_name}
                                        </p>
                                        <br>
                                        <p>
                                            竞单价格:&nbsp;${bid.estimated_price}
                                        </p>
                                        <br>
                                        <p>
                                            审核员拟定报价格:&nbsp;${order.second_price}
                                        </p>
                                        <br>
                                        <p>
                                            保修时间:&nbsp;${bid.estimated_time}
                                        </p>
                                        <br>
                                        <p>
                                            公司简述:&nbsp;${bid.bidding_description}
                                        </p>
                                        <br>
                                        <div>
                                            拒绝通过原因：<br><br>
                                            <textarea id = "reson2" name="reson2" style="width:338px;height:100px"></textarea>
                                        </div>
                                    </div>
                                    <br>
                                    <br>
                                    <button  class="btn btn-success" type="submit" onclick="c(${order.order_state});" style="margin-left: 65px;">竞单审批通过</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button  class="btn btn-danger" type="submit" onclick="d(${order.order_state});">竞单不通过</button>
                                </div>

                            </div>
                        </div><br>
                        <br>
                        <input id="id" type="hidden" name="id" value="${order.id}"/><br>
                        <input id="filenames" type="hidden" name="filenames" value="${order.expense_file}"/><br>
                    </div>
                </div>

        </div>
        <div class="span2">
        </div>
    </div>
</div>



<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script>
    function mykey()
    {
//如果输入不是0-9就无效bai
        if (event.keyCode<47 || event.keyCode>57)
            event.keyCode = 0;
    }
    function setImg2(obj){//用于进行图片上传，返回地址
        var f=$(obj).val();
        if(f == null || f ==undefined || f == ''){
            return false;
        }else if(!/\.(?:png|jpg|bmp|gif|PNG|JPG|BMP|GIF)$/.test(f))
        {
            alertLayel("类型必须是图片(.png|jpg|bmp|gif|PNG|JPG|BMP|GIF)");
            $(obj).val('');
            return false;
        }else{
            //批量上传图片
            $.ajaxFileUpload({
                url:"/business/uploadImgList.html",//需要链接到服务器地址
                secureuri:false,
                fileElementId:"logoFile2",//文件选择框的id属性  ,//文件选择框的id属性
                dataType: 'json',   //json
                contentType: false,    //不可缺
                processData: false,    //不可缺
                success: function (data){
                    if(data!=null){
                        $.each(data,function(i,url){
                            //拼接图片列表
                            var id = $('#detailImgs li:last').attr('id');
                            id = id.substr(1);
                            id = parseInt(id) + 1;
                            var ids=id;
                            id = 'P'+id;
                            var a_hidden="<li id='"+ id +"'><input type='hidden' value='"+url+"' name='imgs'>";
                            var img_html="<img  src='"+url+"'  onclick='showOriginal(this)' original='"+url+"'>";
                            var a_html="<a href='javascript:void(0);' onclick='delespan1("+ids+")'>删除</a>";
                            var li_html="</li>";
                            $('#detailImgs').append(a_hidden+img_html+a_html+li_html);
                        });
                    }else{
                        alertLayel("上传失败");
                        $("#url").val("");
                        $(obj).val('');
                    }
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    alertLayel("上传失败，请检查网络后重试");
                    $("#url").val("");
                    $(obj).val('');
                }
            });
        }
    }
    function delespan1(id){
        $('#P'+id).remove();
    }
</script>
<script language="javascript">
    $('#create').click(function(){
        $('<li><input type="text" name="xx" value="默认" id="xx"></li>').appendTo($('#u'));
    });
</script>
<script>
    function fag2(video) {
        if(video!==""){
            location.href="/mmmsimage/${order.problem_video}";
        }
        else{
            location.href="${pageContext.request.contextPath}/error";
        }
    }
    function a(){
        var id = document.getElementById("id").value;
        var completeData = {
            "id":id
        };
        if (confirm("确定该维修单通过审批吗？")) {
                    $.ajax({
                        url:"${pageContext.request.contextPath}/reviewer/receive_ok",
                        type : "POST",
                        dataType:"json",
                        contentType : "application/json;charset=UTF-8",
                        data: JSON.stringify(completeData),
                        success:function(data) {
                        }
                    });
                    setTimeout(function () {
                        // 这里就是处理的事件
                        window.close();
                        window.opener.location.reload();
                    }, 800);
                            // 可以对父窗口进行刷新

                } else {
                    return false;
                }
    }
    function b() {
        var id = document.getElementById("id").value;
        var reason2 = document.getElementById("reason").value;
        var completeData = {
            "id":id,
            "reason":reason2
        };
        if(reason!==""&&reason2!=="") {
            if (confirm("是否确认该维修单审批无法通过？")) {
                $.ajax({
                    url:"${pageContext.request.contextPath}/reviewer/receive_no",
                    type : "POST",
                    dataType:"json",
                    contentType : "application/json;charset=UTF-8",
                    data: JSON.stringify(completeData),
                    success:function(data) {
                    }
                });
                setTimeout(function () {
                    // 这里就是处理的事件
                    window.close();
                    window.opener.location.reload();
                }, 800);
            } else {
                return false;
            }
        }else{
            alert("维修意见和原因不能为空！");
            return false;
        }

    }
    function c(flag) {
        var id = document.getElementById("id").value;
        var suggest = document.getElementById("suggest2").value;
        var completeData = {
            "id":id,
            "suggest":suggest
        };
        if (confirm("该维修单审批是否通过？")) {
                $.ajax({
                    url:"${pageContext.request.contextPath}/reviewer/bid_ok",
                    type : "POST",
                    dataType:"json",
                    contentType : "application/json;charset=UTF-8",
                    data: JSON.stringify(completeData),
                    success:function(data) {
                    }
                });
                setTimeout(function () {
                    // 这里就是处理的事件
                    window.close();
                    window.opener.location.reload();
                }, 800);
            } else {
                return false;
            }
    }
    function d(flag) {
        var id = document.getElementById("id").value;
        var reason = document.getElementById("reason2").value;
        var completeData = {
            "id":id,
            "reason":reason
        };
        if(reason!==""){
            if (confirm("该维修单审批无法通过？")) {
                $.ajax({
                    url:"${pageContext.request.contextPath}/reviewer/bid_no",
                    type : "POST",
                    dataType:"json",
                    contentType : "application/json;charset=UTF-8",
                    data: JSON.stringify(completeData),
                    success:function(data) {
                    }
                });
                setTimeout(function () {
                    // 这里就是处理的事件
                    window.close();
                    window.opener.location.reload();
                }, 800);
            } else {
                return false;
            }
        }else{
            alert("拒绝原因不可为空！");
            return false;
        }
    }
    function r_ight() {
        var id = document.getElementById("id").value;
        var completeData = {
            "id":id
        };
            if (confirm("该维修单审批确认通过？")) {
                $.ajax({
                    url:"${pageContext.request.contextPath}/reviewer/reviewer_ok",
                    type : "POST",
                    dataType:"json",
                    contentType : "application/json;charset=UTF-8",
                    data: JSON.stringify(completeData),
                    success:function(data) {
                    }
                });
                setTimeout(function () {
                    // 这里就是处理的事件
                    window.close();
                    window.opener.location.reload();
                }, 500);
            } else {
                return false;
            }
    }

    function n_o() {
        var id = document.getElementById("id").value;
        var states = document.getElementById("states").value;
        var completeData = {
            "id":id,
            "states":states
        };
        if(states!==""){
            if (confirm("该维修单审批无法通过？")) {
                $.ajax({
                    url:"${pageContext.request.contextPath}/reviewer/reviewer_no",
                    type : "POST",
                    dataType:"json",
                    contentType : "application/json;charset=UTF-8",
                    data: JSON.stringify(completeData),
                    success:function(data) {
                    }
                });
                setTimeout(function () {
                    // 这里就是处理的事件
                    window.close();
                    window.opener.location.reload();
                }, 500);
            } else {
                return false;
            }
        }else{
            alert("拒绝原因不可为空！");
            return false;
        }
    }
</script>
<style type="text/css">
    .img{width: 900px;margin: 50px auto; overflow: hidden;}
    .img div{
        float: left;
        width:198px;
        margin-left: 20px;
    }
    .img div img{
        display: block;
        width: 100%;

    }
</style>
<script>
    // https://github.com/josephschmitt/Clamp.js
    var module = document.getElementById("clampjs");
    $clamp(module, {clamp: 3});


    // https://github.com/ftlabs/ftellipsis
    var element = document.getElementById('ftellipsis');
    var ellipsis = new Ellipsis(element);

    ellipsis.calc();
    ellipsis.set();


    // https://codepen.io/Merri/pen/Dsuim
    /**
     * TextOverflowClamp.js
     *
     * Updated 2013-05-09 to remove jQuery dependancy.
     * But be careful with webfonts!
     */

    // bind function support for older browsers without it
    // https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind
    if (!Function.prototype.bind) {
        Function.prototype.bind = function (oThis) {
            if (typeof this !== "function") {
                // closest thing possible to the ECMAScript 5 internal IsCallable function
                throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
            }

            var aArgs = Array.prototype.slice.call(arguments, 1),
                fToBind = this,
                fNOP = function () {},
                fBound = function () {
                    return fToBind.apply(this instanceof fNOP && oThis
                        ? this
                        : oThis,
                        aArgs.concat(Array.prototype.slice.call(arguments)));
                };

            fNOP.prototype = this.prototype;
            fBound.prototype = new fNOP();

            return fBound;
        };
    }

    // the actual meat is here
    (function(w, d){
        var clamp, measure, text, lineWidth,
            lineStart, lineCount, wordStart,
            line, lineText, wasNewLine,
            ce = d.createElement.bind(d),
            ctn = d.createTextNode.bind(d);

        // measurement element is made a child of the clamped element to get it's style
        measure = ce('span');

        (function(s){
            s.position = 'absolute'; // prevent page reflow
            s.whiteSpace = 'pre'; // cross-browser width results
            s.visibility = 'hidden'; // prevent drawing
        })(measure.style);

        clamp = function (el, lineClamp) {
            // make sure the element belongs to the document
            if(!el.ownerDocument || !el.ownerDocument === d) return;
            // reset to safe starting values
            lineStart = wordStart = 0;
            lineCount = 1;
            wasNewLine = false;
            lineWidth = el.clientWidth;
            // get all the text, remove any line changes
            text = (el.textContent || el.innerText).replace(/\n/g, ' ');
            // remove all content
            while(el.firstChild !== null)
                el.removeChild(el.firstChild);
            // add measurement element within so it inherits styles
            el.appendChild(measure);
            // http://ejohn.org/blog/search-and-dont-replace/
            text.replace(/ /g, function(m, pos) {
                // ignore any further processing if we have total lines
                if(lineCount === lineClamp) return;
                // create a text node and place it in the measurement element
                measure.appendChild(ctn(text.substr(lineStart, pos - lineStart)));
                // have we exceeded allowed line width?
                if(lineWidth < measure.clientWidth) {
                    if(wasNewLine) {
                        // we have a long word so it gets a line of it's own
                        lineText = text.substr(lineStart, pos + 1 - lineStart);
                        // next line start position
                        lineStart = pos + 1;
                    } else {
                        // grab the text until this word
                        lineText = text.substr(lineStart, wordStart - lineStart);
                        // next line start position
                        lineStart = wordStart;
                    }
                    // create a line element
                    line = ce('span');
                    // add text to the line element
                    line.appendChild(ctn(lineText));
                    // add the line element to the container
                    el.appendChild(line);
                    // yes, we created a new line
                    wasNewLine = true;
                    lineCount++;
                } else {
                    // did not create a new line
                    wasNewLine = false;
                }
                // remember last word start position
                wordStart = pos + 1;
                // clear measurement element
                measure.removeChild(measure.firstChild);
            });
            // remove the measurement element from the container
            el.removeChild(measure);
            // create the last line element
            line = ce('span');
            // give styles required for text-overflow to kick in
            (function(s){
                s.display = 'inline-block';
                s.overflow = 'hidden';
                s.textOverflow = 'ellipsis';
                s.whiteSpace = 'nowrap';
                s.width = '100%';
            })(line.style);
            // add all remaining text to the line element
            line.appendChild(ctn(text.substr(lineStart)));
            // add the line element to the container
            el.appendChild(line);
        }
        w.clamp = clamp;
    })(window, document);

    // the only bit of jQuery
    $(window).bind('load', function() {
        clamp(document.getElementById('textoverflowclamp'), 3);
    });

</script>
</body>
</html>




